<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-23 09:15:44
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-23 17:18:41
-->
<template>
    <div>
        <el-page-header @back="goBack" content="视频详情"> </el-page-header>
        <div class="mainBox">
            <div class="userInfo">
                <el-avatar size="medium" :src="VideoItem.avatar"></el-avatar>
                <div class="infoText">
                    <div>{{ VideoItem.nicheng }}</div>
                    <div class="infoTime">
                        {{
                            VideoItem.province_name +
                                VideoItem.city_name +
                                VideoItem.area_name
                        }}
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="title">{{ VideoItem.title }}</div>
                <div class="contontText">
                    <video
                        id="video"
                        autoplay="autoplay"
                        :src="VideoItem.video_url"
                        controls="true"
                        x5-video-player-fullscreen="true"
                        style="width:100%;height:500px"
                    ></video>
                </div>
            </div>

            <div class="operation">
                <div class="item">
                    <span class="iconfont icon-zujian"></span>
                    <span class="num">{{ VideoItem.commentnum }}</span>
                </div>
                <div
                    class="item"
                    :class="[VideoItem.is_like == 2 ? 'upActive' : '']"
                    @click="giveUp(VideoItem.video_id, VideoItem.is_like)"
                >
                    <span class="iconfont icon-xihuan1"></span>
                    <span class="num">{{ VideoItem.likenum }}</span>
                </div>
            </div>
            <div class="comment">
                <div
                    class="commentItem"
                    v-for="(item, index) in replyList"
                    :key="index"
                >
                    <div class="headerInfo">
                        <div class="Avatar">
                            <el-avatar
                                size="medium"
                                :src="item.avatar"
                            ></el-avatar>
                            <div class="AvatarName">{{ item.users_name }}</div>
                        </div>
                        <div
                            class="commentlike"
                            :class="[item.is_like == 1 ? 'upActive' : '']"
                            @click="DelReplyLike(item, index)"
                        >
                            <span class="iconfont icon-xihuan1"></span>
                            <span class="likeNum">{{ item.likenum }}</span>
                        </div>
                    </div>
                    <div class="commentContent">
                        <div>{{ item.reply_text }}</div>
                        <div class="commentState">
                            <div>{{ item.crate_time | getTime }}</div>
                            <div
                                class="commentDel"
                                v-if="item.user_id == user_id"
                                @click="DelReply(item, index)"
                            >
                                删除
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    @click="moreListsReply"
                    v-if="replyList.length < total"
                    class="getMore"
                >
                    -- 点击加载更多 --
                </div>
                <div class="noMore" v-else>-- 没有更多评论啦~ --</div>
            </div>
            <div class="sendComment">
                <el-divider></el-divider>
                <el-input
                    placeholder="参与评论~"
                    class="input-with-select"
                    v-model="addReplyInput"
                >
                    <el-button type="primary" slot="append" @click="AddReply"
                        >发送</el-button
                    >
                </el-input>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getVideoListsReply,
    saveVideoIsLike,
    saveVideoDelReplyLike,
    saveVideoAddReplyLike,
    saveVideoAddReply,
    saveVideodelReply
} from "@/api/personalHomepage/index";
import { getFormatTime } from "@/utils/timeUtils";
export default {
    props: ["VideoItem"],
    data() {
        return {
            //评论
            page: 1,
            pagesize: 8,
            total: 0,
            replyList: [],
            addReplyInput: ""
        };
    },
    watch: {
        VideoItem: {
            handler(obj) {
                console.log(obj);
                this.VideoListsReply();
            },
            // deep: true,
            immediate: true
        }
    },
    filters: {
        //时间格式
        getTime(val) {
            if (val != "") {
                return getFormatTime(val * 1000);
            }
        }
    },
    computed: {
        user_id() {
            return this.$store.getters.userInfo.id;
        }
    },
    methods: {
        goBack() {
            this.$emit("delBack");
        },
        //视频评论
        async VideoListsReply() {
            var query = {
                video_id: this.VideoItem.video_id,
                page: this.page,
                pagesize: this.pagesize
            };
            var list = await getVideoListsReply(query);
            if (list.code == 200) {
                this.total = list.data.total;
                this.replyList = list.data.data;
            }
            console.log("视频评论：", list);
        },
        async moreListsReply() {
            this.page = this.page + 1;
            var query = {
                video_id: this.VideoItem.video_id,
                page: this.page,
                pagesize: this.pagesize
            };
            var list = await getVideoListsReply(query);
            if (list.code == 200) {
                this.total = list.data.total;
                this.replyList = this.replyList.concat(list.data.data);
            }
            console.log("视频评论：", list);
        },
        /* 点赞 & 取消点赞 */
        async giveUp(video_id, is_like) {
            var state = 0;
            state = is_like == 2 ? 1 : 2;
            var query = {
                video_id: video_id,
                is_like: state
            };
            var list = await saveVideoIsLike(query);
            if (list.code == 200) {
                if (is_like == 2) {
                    this.VideoItem.is_like = 0;
                    this.VideoItem.likenum--;
                } else {
                    this.VideoItem.is_like = 2;
                    this.VideoItem.likenum++;
                }
            }
        },
        /* 点赞 & 取消点赞 */
        async DelReplyLike(item, index) {
            var query = {
                video_id: this.VideoItem.video_id,
                video_reply_id: item.video_reply_id
            };
            var list;
            if (item.is_like == 1) {
                list = await saveVideoDelReplyLike(query);
                if (list.code == 200) {
                    this.replyList[index].is_like = null;
                    this.replyList[index].likenum =
                        this.replyList[index].likenum - 1;
                }
            } else {
                list = await saveVideoAddReplyLike(query);
                if (list.code == 200) {
                    this.replyList[index].is_like = 1;
                    this.replyList[index].likenum =
                        this.replyList[index].likenum + 1;
                }
            }
            console.log("评论点赞：", list);
        },
        //发表评论
        async AddReply() {
            if (this.addReplyInput.trim() == "") {
                return this.$message({
                    message: "评论内容不能为空",
                    type: "warning"
                });
            }
            var query = {
                text: this.addReplyInput,
                video_id: this.VideoItem.video_id
            };
            var list = await saveVideoAddReply(query);
            if (list.code == 200) {
                this.addReplyInput = "";
                this.page = 1;
                this.VideoListsReply();
                this.$message({
                    type: "success",
                    customClass: "customClass",
                    message: "评论成功!"
                });
            }
            console.log("发表评论:", list);
        },
        //删除评论
        DelReply(item, index) {
            this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var query = {
                        video_reply_id: item.video_reply_id,
                        video_id: this.VideoItem.video_id
                    };
                    var list = await saveVideodelReply(query);
                    if (list.code == 200) {
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "删除成功!"
                        });
                        this.total--;
                        this.VideoItem.commentnum--;
                        this.replyList.splice(index, 1);
                    }
                    console.log("删除评论:", list);
                })
                .catch(() => {});
        }
    }
};
</script>

<style scoped lang="scss">
.mainBox {
    width: 100%;
    min-height: 700px;
    padding-top: 40px;
    position: relative;

    .userInfo {
        display: flex;
        align-items: center;

        .infoText {
            margin-left: 15px;

            .infoTime {
                color: rgb(141, 140, 140);
            }
        }
    }

    .content {
        width: 100%;
        margin-top: 15px;

        .title {
            font-size: 17px;
            font-weight: 600;
        }

        .contontText {
            margin-top: 18px;
        }
    }

    .operation {
        margin-top: 18px;
        display: flex;
        flex-direction: row-reverse;

        .item {
            width: 100px;
            height: 30px;
            border: 1px solid #d1cfcf;
            border-radius: 15px;
            margin-right: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #999999;
            cursor: pointer;

            .num {
                margin-left: 8px;
            }
        }
    }

    .comment {
        width: 100%;
        margin-top: 30px;

        .commentItem {
            width: 100%;
            margin-bottom: 25px;

            .headerInfo {
                display: flex;
                justify-content: space-between;

                .Avatar {
                    display: flex;
                    align-items: center;

                    .AvatarName {
                        margin-left: 8px;
                    }
                }

                .commentlike {
                    color: #8b8a8a;
                    cursor: pointer;

                    .likeNum {
                        margin-left: 5px;
                        margin-right: 10px;
                    }
                }
            }

            .commentContent {
                margin-left: 35px;
                margin-top: 10px;

                .commentState {
                    color: #8b8a8a;
                    font-size: 14px;
                    margin-top: 20px;
                    display: flex;
                    align-items: center;

                    div {
                        margin-right: 20px;
                    }

                    .huiFu {
                        cursor: pointer;
                    }

                    .commentDel {
                        color: #f2546a;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .sendComment {
        width: 100%;
        margin-top: 60px;
        // position: absolute;
        // bottom: 0;
        // left: 0;
        // right: 0;
    }

    .upActive {
        color: #ff4e78 !important;
        border-color: #ff4e78 !important;
    }

    .getMore {
        color: #8b8a8a;
        width: 100%;
        text-align: center;
        cursor: pointer;
        &:hover {
            color: rgb(20, 102, 255);
        }
    }

    .noMore {
        color: #8b8a8a;
        width: 100%;
        text-align: center;
    }
}
</style>
